<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
      .cont p{
		  display: inline;
	  }
    </style>
  </head>
  <body>
    
    <h1>My shopping list</h1>
    <form  >
    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button onclick="addItem()">Add item</button>
    </div>
   
    <ul>
      <!-- <li><span>12312</span><button  onclick="deleteTheDom()">Delete</button></li> -->
    </ul>
    <div class="cont">
      <span>购物车内的商品有：</span>
      <p id="cotent"></p>
      <button  onclick="removeAll()">清空</button>
    </div>

  </form>

    <script>
      /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、实现方式必须为第10章内容，dom节点可以随意添加属性
      6、截至下周二前
      新增需求
      1、输入框过滤前后空字符串
      2、记录输入框输过的文字，在  <p id="cotent"></p> 标签中显示，按 ',' 号分割
      3、点击清空按钮清空列表，并清空 <p id="cotent"></p> 标签
      4、点击列表中的删除按钮，请将<p id="cotent"></p> 标签中对应的文字也一并删除掉
      5、列表中的文字不允许重复 （若重复则什么也不做，然后清空输入框）
      6、增加一键批量功能： 输入框中的文字 当出现 '#' 符号，列表中增加分割后的文字（也要过滤重复的情况）
      7、html页面有所改动，外层增加了form标签，不要随意删除
      8、实现方式必须为前10章内容，dom节点可以随意添加属性
      6、截至本周日下午下班前
      **/
	var form01 = document.forms[0];
	var input01 = document.getElementById("item");
	/* 获取按钮节点，取消默认提交表单属性 */
	var btnCollection = document.getElementsByTagName("button");
	var btnArr = Array.prototype.slice.call(btnCollection , 0); 
	btnArr.forEach( function(item, index, array){ 
			item.setAttribute("type","button");
	});
	var content = document.getElementById("cotent");
	
	var ul01 =  document.getElementsByTagName("ul")[0];
	var ul01Collection01 = ul01.getElementsByTagName("li");
	var ul01Arr01 = Array.prototype.slice.call( ul01Collection01 , 0); 
	
	function addItem(){
			/* 1.输入框过滤前后空字符串 */
			var inputValue = input01.value;
			var noEmptyString = inputValue.trim();
	
			if(input01.value != "" && input01.value.indexOf("#") == -1){
				
				var li = document.createElement("li");
				var	span = document.createElement("span");
				var	spanTextNode = document.createTextNode(noEmptyString);
				li.setAttribute( "name" , noEmptyString  );
				var	button = document.createElement("button");
				var	buttonText =document.createTextNode("Delete");
				var ul01Collection = ul01.getElementsByTagName("li");
				var ul01Arr = Array.prototype.slice.call( ul01Collection , 0); 
				
				/*2.记录输入框输过的文字，在  <p id="cotent"></p> 标签中显示，按 ',' 号分割*/
				content.innerText = content.innerText + "," + noEmptyString;
				if(content.innerText.indexOf(",") == 0){
					content.innerText = content.innerText.substr( 1, content.innerText.length -1 );
				}
				
				button.setAttribute("onclick", "deleteTheDom(this)" );
				button.setAttribute("type" , "button");
				button.appendChild( buttonText );
				span.appendChild(spanTextNode);
				li.appendChild(span);
				li.appendChild(button);
				ul01.appendChild(li);
				
				/*5.列表中的文字不允许重复 （若重复则什么也不做，然后清空输入框） */
				for(var i=0, len=ul01Arr.length; i<len; i++){
					if( ul01Arr[i].firstElementChild.innerText == noEmptyString ){
						ul01.removeChild(ul01.lastChild);
						input01.value ="";
					}
					input01.value ="";
				}
				/*5.检索p中重复字符串*/
				content.innerText = filterRepeatStr(content.innerText);
				input01.value ="";
				
			} else if( input01.value.indexOf("#") != -1 ){
					/*6.增加一键批量功能： 输入框中的文字 当出现 '#' 符号，列表中增加分割后的文字（也要过滤重复的情况）*/
					 
					var hostArr = [];
					/* 去除空#号分隔符 */
					if( (noEmptyString.indexOf("#") == 0 ) && (noEmptyString.lastIndexOf("#") == noEmptyString.length-1 )){
						noEmptyString = noEmptyString.substr( 1  , noEmptyString.length-2 );
					}else if( (noEmptyString.indexOf("#")  == 0 ) && ( noEmptyString.lastIndexOf("#") != noEmptyString.length-1)){
						noEmptyString = noEmptyString.substr( 1 );
					}else if( (noEmptyString.lastIndexOf("#") == noEmptyString.length-1 ) && (noEmptyString.indexOf("#") != 0 )){
						noEmptyString = noEmptyString.substr( 0 , noEmptyString.length-1 );
					}else{
						hostArr = noEmptyString.split("#");
					}
					hostArr = noEmptyString.split("#");
					
					for( var i=0; i<hostArr.length; i++ ){
							
						var hostTextNode = document.createTextNode(hostArr[i]);
						var	hostSpan = document.createElement("span");
						var hostLi = document.createElement("li");
						hostLi.setAttribute("name", hostArr[i] );
						hostSpan.appendChild(hostTextNode);
						hostLi.appendChild(hostSpan);
						
						var	hostButton = document.createElement("button");
						var	hostButtonText =document.createTextNode("Delete");
						hostButton.setAttribute("onclick", "deleteTheDom(this)");
						hostButton.setAttribute("type" , "button");
						hostButton.appendChild( hostButtonText );
						hostLi.appendChild(hostButton);
						ul01.appendChild(hostLi);
					}
					
					if(content.innerText.indexOf(",") == 0){
						content.innerText = content.innerText.substr( 1, content.innerText.length -1 );
					}
					/*6.过滤重复的情况 */
					var ul01Collection = ul01.getElementsByTagName("li");
					var ul01Arr = Array.prototype.slice.call( ul01Collection , 0);
					
					filterRepeatArrItem(ul01Arr);
					ul01.innerHTML="";
					for(var n=0; n<ul01Arr.length; n++ ){
						ul01.appendChild(ul01Arr[n]);
						content.innerText =  content.innerText + "," + ul01Arr[n].firstElementChild.innerText;
					}
					/*5.检索p中重复字符串*/
					content.innerText = filterRepeatStr(content.innerText); 
					
					input01.value ="";
					
			}else{
					alert("不允许输入空值");
			}
	}

	/* 4、点击列表中的删除按钮，请将<p id="cotent"></p> 标签中对应的文字也一并删除掉 */
	function deleteTheDom(_ob){
		//_ob指向当前节点
		_ob.parentNode.parentNode.removeChild(_ob.parentNode);
		var thisText =  _ob.previousElementSibling.innerText;
		
		var contentArr = content.innerText.split(",");
		
		var newArr = [];
		 for( var i=0 ; i<contentArr.length; i++  ){
			if( contentArr[i] != thisText ){
					newArr.push( contentArr[i] );
			}
		} 
		content.innerText = newArr.join(",");
	}
	/* 3、点击清空按钮清空列表，并清空 <p id="cotent"></p> 标签 */
	function removeAll(){
		var btnCollection = ul01.getElementsByTagName("button");
		var btnArr = Array.prototype.slice.call(btnCollection , 0); 
		btnArr.forEach( function(item, index, array){ 
				item.setAttribute("onclick","null");
		}); 
		ul01.innerHTML="";
		content.innerText="";
	}
	/* 过滤重复字符串 */
	function filterRepeatStr(str) {
		var arr1 = str.split(",");
		var arr2 = new Array();
		var j = 0
		for (var i = 0; i < arr1.length; i++) {
			if ((arr2 == "" || arr2.toString().match(new RegExp(arr1[i], "g")) == null) && arr1[i] != "") {
				arr2[j] = arr1[i];
				j++;
			}
		}
		return arr2.toString();
	}
	/* 过滤一个数组中相同的项 */
	function filterRepeatArrItem(arr) {
		for (var i = 0; i < arr.length; i++) {
			for (var j = i + 1; j < arr.length; j++) {
				if (arr[i].firstElementChild.innerText == arr[j].firstElementChild.innerText) { //第一个等同于第二个，splice方法删除第二个
					arr.splice(j, 1);
					j--;
				}
			}
		}
		return arr;
	}
	
	
    </script>
  </body>
</html>